<template>
  <!-- 粽子哪里跑 -->
  <div class="duanwu">
    <audio ref="bg" loop src="../../assets/duanwu/audio/bgmusic01.mp3"></audio>
    <audio ref="get" src="../../assets/duanwu/audio/get_gift.mp3"></audio>
    <div class="game">
      <div class="header" id="header">
        <div class="score">分数：{{ score }}</div>
        <div class="time">时间：{{ time }}</div>
        <div @click="changeImg" :class="[adFlag ? 'Nplay' : 'play']"></div>
      </div>

      <div id="cnt"></div>

      <div class="footer" id="footer">
        <img src="../../assets/duanwu/img/panzi.png" alt="" />
      </div>
    </div>

    <!-- 开始游戏 -->
    <StartGame
      @statGame="init"
      @showRank="showRank"
      v-show="playGame"
    ></StartGame>

    <!-- 结束弹框 -->
    <endGame
      :score="score"
      @rePlay="init"
      @showRank="showRank"
      v-show="endGame"
    ></endGame>

    <!-- 排名 -->
    <Rank v-show="rankFlag" :act="act" @closeRank="closeRank"></Rank>
  </div>
</template>

<script>
import run from "../../assets/duanwu/img/run.gif";
import no from "../../assets/duanwu/img/no.png";
import ok from "../../assets/duanwu/img/ok.png";
import ok1 from "../../assets/duanwu/img/ok1.png";
import StartGame from "../../components/duanwu/startGame";
import endGame from "../../components/duanwu/endGame";
import Rank from "../../components/duanwu/Rank";
export default {
  components: {
    StartGame,
    endGame,
    Rank,
  },
  data() {
    return {
      score: 0, //分数
      time: 30, //时间
      adFlag: true, //是否播放背景音乐
      screenX: window.screen.width, //屏幕宽
      screenY: window.screen.height, //屏幕高
      pointX: 0, //原点X
      pointY: 0, //原点Y
      endX: 0, //结束X位置
      endY: 0, //结束Y位置
      zongziTimer: null, //粽子定时器
      playGame: true,
      endGame: false,
      rankFlag: false,
      act: 0,
      userid:'000001229'
    };
  },
  methods: {
    //是否播放背景音乐
    changeImg() {
      this.adFlag = !this.adFlag;
      if (this.adFlag) {
        this.$refs.bg.pause();
      } else {
        this.$refs.bg.play();
      }
    },
    showRank(e) {
      this.act = e;
      this.rankFlag = true;
    },
    closeRank() {
      this.rankFlag = false;
    },
    //初始化
    init() {
      this.playGame = false;
      this.endGame = false;
      this.$refs.bg.play();
      this.adFlag = false;
      this.score = 0;
      this.time = 30;
      this.start();
      let timer = setInterval(() => {
        let s = --this.time;
        this.time = s;
        if (this.time == 0) {
          this.stop();
          this.$refs.bg.pause();
          this.endGame = true;
          clearInterval(timer);
        }
      }, 1000);
    },
    //结束
    stop() {
      clearInterval(this.zongziTimer);
      document.querySelector("#cnt").innerHTML = "";
    },
    //开始
    start() {
      this.zongziTimer = setInterval(() => {
        this.createZZ();
      }, 500);
    },
    //创建粽子
    createZZ() {
      let zz = {};
      var timer = null;

      let headerDom = document.querySelector("#header");
      let cntDom = document.querySelector("#cnt");
      let footerDom = document.querySelector("#footer");

      //随机高度
      let min = headerDom.offsetHeight;
      let max = cntDom.offsetHeight + headerDom.offsetHeight - 150;
      let rdm = Math.floor(Math.random() * (max - min) + min);
      zz.top = rdm;
      zz.left = this.screenX;

      let ele = document.createElement("img");
      ele.src = run;
      ele.style.position = "fixed";
      ele.style.left = zz.left + "px";
      ele.style.top = zz.top + "px";
      ele.style.width = "85px";
      cntDom.appendChild(ele);

      //点击事件
      let clickZZ = (e) => {
        e.preventDefault();
        let { clientX, clientY } = e.changedTouches[0];
        this.pointX = clientX - ele.offsetLeft;
        this.pointY = clientY - ele.offsetTop;
        ele.src = ok;
        clearInterval(timer);
        ele.style.zIndex = 200;
      };

      //   移动事件
      let moveZZ = (e) => {
        let { clientX, clientY } = e.changedTouches[0];
        this.endX = clientX - this.pointX;
        this.endY = clientY - this.pointY;
        let headerH = headerDom.offsetHeight;
        this.endX =
          this.endX < 0
            ? 0
            : this.endX > this.screenX - ele.offsetWidth
            ? this.screenX - ele.offsetWidth
            : this.endX;
        this.endY =
          this.endY < headerH
            ? headerH
            : this.endY > this.screenY - ele.offsetHeight
            ? this.screenY - ele.offsetHeight
            : this.endY;

        ele.style.left = this.endX + "px";
        ele.style.top = this.endY + "px";
        ele.style.zIndex = 200;
      };

      //结束事件
      let endZZ = (e) => {
        zz.top = ele.offsetTop;
        zz.left = ele.offsetLeft;

        let zongziB = ele.offsetTop + ele.offsetHeight;
        let panziT = footerDom.offsetTop + 35;
        if (zongziB > panziT) {
          clearInterval(timer);
          ele.src = ok1;
          this.$refs.get.play();
          ele.removeEventListener("touchstart", clickZZ);
          ele.removeEventListener("touchend", endZZ);
          ele.removeEventListener("touchmove", moveZZ);
          this.score += 5;
          ele.style.zIndex = 200;
        } else {
          ele.src = run;
          console.log("没有抓住");
          ele.style.top = zz.top + "px";
          timer = setInterval(() => {
            zz.left -= 2;
            ele.style.left = zz.left + "px";
            if (zz.left < -30) {
              ele.src = no;
            }
            if (zz.left < -100) {
              let img = cntDom.querySelector("img");
              if (img) {
                ele.parentNode.removeChild(ele);
              }
              clearInterval(timer);
            }
          }, this.time / 3);
        }
      };

      ele.addEventListener("touchstart", clickZZ);
      ele.addEventListener("touchend", endZZ);
      ele.addEventListener("touchmove", moveZZ);

      timer = setInterval(() => {
        zz.left -= 2;
        ele.style.left = zz.left + "px";
        if (zz.left < -30) {
          ele.src = no;
        }
        if (zz.left < -100) {
          let img = cntDom.querySelector("img");
          if (img) {
            ele.parentNode.removeChild(ele);
          }
          clearInterval(timer);
        }
      }, this.time / 3);
    },
    //
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.duanwu {
  height: 100vh;
  color: #fff;
  font-size: 18px;
  min-width: 300px;
  .game {
    height: 100%;
    background: url(../../assets/duanwu/img/bg.jpg) no-repeat;
    background-size: 100% 100%;
    .header {
      display: flex;
      height: 60px;
      justify-content: space-around;
      align-items: center;
      .Nplay {
        width: 40px;
        height: 40px;
        background: url(../../assets/duanwu/img/musicOff.png) no-repeat;
        background-size: 100% 100%;
      }
      .play {
        width: 40px;
        height: 40px;
        background: url(../../assets/duanwu/img/musicOn.png) no-repeat;
        background-size: 100% 100%;
      }
    }

    #cnt {
      position: fixed;
      top: 10%;
      width: 100%;
      height: 65%;
      z-index: 100;
      img {
        width: 85px;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>